import React, { PureComponent } from 'react';
import { WriterTitle, WriterSwitch, WriterItem, WriterItemTitle, Add, WriterMore } from '../styled';
import { connect } from 'react-redux';

class Writer extends PureComponent {
	render() {
		return(
			<div>
				<WriterTitle>
					推荐作者
					<WriterSwitch>
						<i className="iconfont spin">&#xe857;</i>
						换一批
					</WriterSwitch>
				</WriterTitle>
				{
					this.props.list.map((item) => {
						return (
							<WriterItem key={item.get('id')}>
								<img src={item.get('imgUrl')} alt="" />
								<WriterItemTitle>
									<h4>{item.get('title')}</h4>
									<p>{item.get('desc')}</p>
								</WriterItemTitle>
								<Add>+关注</Add>
							</WriterItem>
						)
					})
				}
				<WriterMore>查看全部 ></WriterMore>
			</div>
		)
	}
}

const mapState = (state) => ({
	list: state.getIn(['home', 'writerList'])
})

export default connect(mapState, null)(Writer);